<template>
  <div class="newPartner">
    <!-- 商家类型与返回 -->
    <div class="newPartner_type">
      <div>bannerl列表/<span>banner详情</span></div>
      <el-button @click="backList" type="success">返回</el-button>
    </div>

    <!-- 新增商家信息 -->
    <div class="newPartner_info">
      <!-- 基础信息 -->
      <div class="newPartner_needInfo">
        <div class="newPartner_info">
          <div class="newPartner_info_box">
            <form action="#" class="form">
              <ul>
                <li>
                  <span><strong style="color: red">*</strong>名称</span
                  ><input type="text" maxlength="32" v-model="form.name" />
                </li>
                <li>
                  <span>备注</span
                  ><input type="text" maxlength="21" v-model="form.desc" />
                </li>
                <li>
                  <span><strong style="color: red">*</strong>客户端类型</span
                  ><el-select
                    v-model="form.apptype"
                    placeholder="请选择客户端类型"
                  >
                    <el-option
                      v-for="item in appTypeList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </li>
                <!-- <li>
                  <span><strong style="color: red">*</strong>卖场</span>
                  <el-select
                    v-model="form.market_id"
                    clearable
                    @change="selectMarket"
                    filterable
                    placeholder="请选择卖场"
                  >
                    <el-option
                      v-for="item in marketList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </li> -->
              </ul>
            </form>
          </div>
          <!--
					<div class="license">
					    <span style="width: 112px;text-align: right;">banner图</span>
					    <div class="cardImg_positive">
							<div v-if="thisimg==''" class="imgWrap">
								<input
								type="file"
								accept="image/png, image/jpeg, image/gif, image/jpg"
								@change="toUpload"
								/>
								<div class="upTit">
								<i class="el-icon-plus"></i>
								banner图
								</div>
							</div>
							<div v-else class="imgWrap">
								<img :src="thisimg" alt="" @load="loadImg()" id="imgTag">
								<div class="shadowImg">
								  <i @click="delImg()" class="el-icon-delete"></i>
								</div>
							</div>
					  </div>
					</div>
					-->
        </div>

        <!-- 提交按钮 -->
        <div class="submitBtn">
          <button @click="toAddBanner">提交</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navStatus: false, //点击基础信息或附件上传
      roomStatus: 1, //店铺上下架状态
      shopRoombrief: "", //店铺简介
      form: {
        id: 0,
        name: "",
        desc: "",
        apptype: null,
        type: 0,
        market_id:''
      },
      appTypeList: [
        { id: 1, name: "用户小程序" },
        { id: 2, name: "合作方小程序" },
        /*
			{id:3,name:'合作方PC后台'},
			{id:4,name:'pc总后台'},
			*/
      ],
      thisimg: "",
      marketList: [],
    };
  },
  mounted() {
    let id = this.$route.query.id;
    if (id) {
      this.getBannerDetail(id);
    }
    this.remoteMethod()
  },

  methods: {
    // 获取卖场列表
    remoteMethod() {
      this.$http.post("/api/root/Market/marketList").then((res) => {
        console.log(res, "卖场列表");
        if (res.code == 1) {
          this.marketList = res.data ? res.data : [];
        }
      });
    },
    // 选择卖场
    selectMarket() {

    },
    //获取详情
    getBannerDetail(id) {
      console.log(id);
      this.$http.post("/api/root/Banner/typeInfo", { type: id }).then((res) => {
        console.log(res);
        if (res.code == 1) {
          this.form = res.data ? res.data : {};
          this.form.type = this.form.id;
        }
      });
    },
    /*
	getTypeList(){
		this.$http.post('/api/root/Banner/typeList',{page:1,pagesize:100}).then(res=>{
			console.log(res,'typelist');
			if (res.code==1) {
				let baselist = [{id:0,name:'获取类型列表失败'}]
				this.typeList = res.data.list?res.data.list:baselist;
			}
		})
	},
	
	
	//banner图
	toUpload(event) {
	  let file = event.target.files[0];
	  let form = new FormData();
	  let newFile = null;
	  this.$imageConversion.compress(file, 0.1).then(res => {
	    newFile = new File([res], file.name, {
	      type: res.type,
	      lastModified: Date.now()
	    });
	    console.log(newFile);
	    form.append("file", newFile);
	    this.$http
	      .post("/api/client/base/uploadfile", form)
	      .then(res => {
	        console.log(res);
	        if (res.code == 1) {
	          this.thisimg = res.data.url;
	          this.form.img_id = res.data.id;
	          this.$message({
	            type: "success",
	            message: "上传成功"
	          });
	        }
	      })
	      .catch(err => {
	        this.$message({
	          showClose: true,
	          message: "上传失败",
	          type: "error"
	        });
	      });
	  });
	},

   //点击删除营业执照
   delImg() {
     this.form.img_id = "";
	 this.thisimg = "";
   },
*/
    // 点击返回到列表
    backList() {
      this.$router.back(1);
    },
    /*
	loadImg(){
		let imgtag = document.getElementById('imgTag');
		let width = imgtag.width;
		let height = imgtag.height;
		let boxHeight = 250;
		if(height>=boxHeight){
			imgtag.width = boxHeight*width/height;
			imgtag.height = boxHeight;
		}
		
	},
	*/

    // 点击提交按钮
    toAddBanner() {
      console.log(this.form);
      if (!this.form.name) {
        this.$message({
          type: "error",
          message: "名称不能为空",
        });
        return
      }
      if (!this.form.apptype) {
        this.$message({
          type: "error",
          message: "客户端类型不能为空",
        });
        return
      }
      // if(!this.form.market_id){
      //   this.$message.warning('请选择卖场')
      //   return
      // }
      if (this.form.id) {
        this.form.banner_id = this.form.id;
        this.$http
          .post("/api/root/banner/typeEdit", this.form)
          .then((res) => {
            if (res.code == 1) {
              this.$router.push({ name: "bannerTypeList", params: {} });
              this.$message({
                type: "success",
                message: "添加成功",
              });
            } else {
              this.$message({
                type: "error",
                message: res.msg,
              });
            }
          })
          .catch((err) => {
            this.$message({
              type: "error",
              message: err,
            });
          });
      } else {
        this.$http
          .post("/api/root/banner/typeAdd", this.form)
          .then((res) => {
            if (res.code == 1) {
              this.$router.push({ name: "bannerTypeList", params: {} });
              this.$message({
                type: "success",
                message: "添加成功",
              });
            } else {
              this.$message({
                type: "error",
                message: res.msg,
              });
            }
          })
          .catch((err) => {
            this.$message({
              type: "error",
              message: err,
            });
          });
      }
    },
  },
};
</script>

<style lang="less" scoped>
@import "bannerTypeDetail.less";
</style>
